<template>
  <div class="users">
    <h2 style="margin-bottom: 20px;">用户管理</h2>

      
<!-- <el-row :gutter="20" style="margin-bottom: 20px;">
  <el-col :span="8"> 
    <el-input clearable  placeholder="请输入内容" class="input-with-select" ></el-input>
  </el-col>
  <el-button   >查询</el-button>
  <el-button type="primary" @click="add_user()">新增</el-button>
</el-row> -->


<el-table :data="list"  stripe>
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="nickname" label="昵称" min-width="80px"></el-table-column>
  <el-table-column prop="phone" label="手机号" min-width="80px"></el-table-column>   
  <el-table-column prop="avatar" label="头像" min-width="80px">
    <template #default="scope">
      <el-avatar :src="scope.row.avatar" />
    </template>
  </el-table-column>  
  <el-table-column prop="state" label="状态" min-width="80px">
    <!-- 开关--0正常---1禁用 -->
    <template #default="scope">
      <el-switch v-model="scope.row.state" :active-value="0" :inactive-value="1" @change="changeList(scope.row.id,scope.row.state)" />
    </template>
  </el-table-column>
  <el-table-column prop="socket_id" label="连接id" min-width="80px"></el-table-column>    
  <el-table-column prop="create_date" label="创建时间" width="180px"></el-table-column>         
  <el-table-column  label="操作" width="150px">
    <template #default="scope">
      <el-button type="danger"  size="small"  @click="delList(scope.row.id)">删除</el-button>
    </template>
  </el-table-column>
</el-table>


 <!-- 分页区域 -->
 <el-pagination
    background
    :page-size="size"
    :pager-count="11"
    layout="prev, pager, next"
    :total="total"
    @current-change="change"
  />

  </div>
</template> 

<script setup lang="ts">
import {ref} from 'vue'
import {getlist,updateList,deleteList,gettotal} from '../api/user.js'
import  { ElMessage } from 'element-plus'
const list = ref([
  
])
//分页
let count = ref(1)
//条数
let size = ref(10)
let total = ref(100)
function change(value: number){
  count.value = value
  Getlist()
}
//获取总数
const totals = async()=>{
  const {data:res}= await gettotal('gettotal')
  total.value = res.total
}
totals()
//获取列表
const Getlist = async ()=>{
  const {data:res} = await getlist(`getlist/${count.value}`)
  if(res.data.code != 200) return
  if(res.data.list.length == 0) return
  res.data.list.map((item:any)=>{
    item.state = Number(item.state) 
  })
  list.value = res.data.list
}
//修改状态
const changeList = async (id:number,state:number)=>{
  const {data:res} = await updateList('update',{id,state})
  console.log(res)
  if(res.data.code != 200) return ElMessage.error('修改失败')
  ElMessage.success('修改成功')
  Getlist()
}
//删除
const delList = async (id:number)=>{
  const {data:res} = await deleteList(`delete/${id}`)
  console.log(res)
  if(res.data.code != 200) return ElMessage.error('删除失败')
  ElMessage.success('删除成功')
  Getlist()
}

Getlist()
</script>